import React,{useEffect,useState} from 'react'
import {useSearchParams,useNavigate} from 'react-router-dom'
import './Css.css'


import Flushed from '../Monitoring_analytics/Operate_monitor/Component/Flushed'


import { Space, Table, Tag, Steps } from 'antd';
import type { TableProps } from 'antd';



import {getorderdetail} from '../../request/api'
const items = [
  {
    title: '待付款',
  },
  {
    title: '代取货',
  },
  {
    title: '已完成',
  },
];


interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}

const columns: TableProps<DataType>['columns'] = [
  {
    title: '商品ID',
    dataIndex: '_id',
    key: '_id',
    render: (text) => <a>{text}</a>,
  },
  {
    title: '商品名称',
    dataIndex: 'brand',
    key: 'age',
  },
  {
    title: '原价',
    dataIndex: 'price',
    key: 'address',
  },
  {
    title: '销售价',
    dataIndex: 'price',
    key: 'address',
  },
  {
    title: '佣金',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '数量',
    dataIndex: 'count',
    key: 'address',
  },
  {
    title: '总价',
    dataIndex: 'allprice',
    key: 'address',
  },
  {
    title: '状态',
    dataIndex: 'type',
    key: 'address',
  }
];



export default function Details() {

  const [searchParams] = useSearchParams();
  const id = searchParams.get('_id')

  const navigate = useNavigate()
  useEffect(() => {
    getOrder()
  },[])

  const [data,setdata] = useState([]) //订单详情
  const [shop,setshop] = useState([]) //商品详情
  const [_id,set_id] = useState('') //订单id
  const [buy_time,setbuy_time] = useState('') //下单时间
  const [state,setstate] = useState('') //订单状态
  const [nickname,setnickname] = useState('') //下单人
  const [phone,setphone] = useState('') //下单人电话
  const [Belongsforeman,setBelongsforeman] = useState('') //所属团长
  const [Belongsforeman_address,setBelongsforeman_address] = useState('') //所属团长地址



  const getOrder = async () => {
    let data:any = await getorderdetail({_id:id}) 
    console.log(data);
    
    setdata(data.data)
    set_id(data.data[0]._id)
    setbuy_time(data.data[0].buy_time)
    if(data.data[0].state == 1){
      setstate('待付款')
    }else if(data.data[0].state == 2){
      setstate('待发货')
    }else if(data.data[0].state == 3){
      setstate('待收货')
    }else if(data.data[0].state == 4){
      setstate('已完成')
    }else if(data.data[0].state == 5){
      setstate('已取消')
    }
    setnickname(data.data[0].userid.nickname)
    setphone(data.data[0].userid.phone)
    setBelongsforeman(data.data[0].groupid.name)
    setBelongsforeman_address(data.data[0].groupid.pick_address)
  }

  

  return (
    <div style={{ backgroundColor: 'white' }}>
      <Flushed></Flushed>
      <div className='Title'>
        订单号:{_id}
      </div>
      <div>
        <div className='title'>
          订单状态
        </div>
        <Steps style={{ marginTop: '1rem', marginBottom: '1rem' }} current={data.state} percent={1} labelPlacement="vertical" items={items} />
        <div className='title'>
          订单基础信息
        </div>
        <div className='order_user'>
          <span>订单号:{_id}</span>
          <span>下单时间:{buy_time}</span>
          <span>订单来源:app</span>
          <span>订单状态:{state}</span>
          <span>下单人昵称:{nickname}</span>
          <span>下单人手机号:{phone}</span>
          <span>收货人:{nickname}</span>
          <span>收货人电话：{phone}</span>
          <span>订单类型：普通订单</span>
          <span>归属团长:{Belongsforeman}</span>
          <span>团长地址:{Belongsforeman_address}</span>
          <span>运单号：12312312312312</span>
        </div>
        <div className='title'>
          商品详情
        </div>
        <div style={{ paddingLeft: '0.2rem', paddingRight: '0.2rem' }}>
          <Table<DataType> columns={columns} dataSource={shop} />
          <div className='order_user'>
            <span>商品金额:80.00</span>
            <span>商品优惠:-20</span>
            <span>优惠卷：-20（满100-20）</span>
            <span>运费：0</span>
            <span>商品数：4</span>
            <span>团长预估佣金：18.00</span>
            <span>售后扣回佣金：0.00</span>
            <span>实际所得佣金：18.00</span>
            <span>实际金额：40.00</span>
            <span>平台剩余金额：22.00</span>
          </div>
        </div>

      </div>


    </div>
  )
}
